<template>
  <div>
    <el-drawer
      :visible.sync="action"
      direction="rtl"
      :title="title"
      size="50%"
      class="drawer"
    >
      <el-drawer
        title="再次回复"
        :append-to-body="true"
        :close-on-press-escape="false"
        :wrapperClosable="false"
        :visible.sync="rereply">
        <div class="re-replyBox" v-loading="formLoading">
          <el-input type="textarea" v-model="form.reply" rows="12" placeholder="请输入二次回复内容"></el-input>
          <h4>上传图片</h4>
          <el-upload
            style="margin-top:20px;"
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div style="margin-top:30px;">
            <el-button type="primary" @click="doPostReply" style="width:150px;" :loading="formLoading">提交回复</el-button>
            <el-tooltip class="item" effect="dark" content="同一留言下，你输入的内容不会被删除，你可以随时发起编辑" placement="top-start">
              <el-button type="info" @click="doPostReplyCancel"  style="width:110px;">取消</el-button>
            </el-tooltip>
          </div>
        </div>
      </el-drawer>
      <div v-loading="actionloading" style="padding:0 30px;min-height:70vh">
        <div v-if="actionData.wid">
          <div class="titleH">
            <a class="title" :href="`https://wz.mala.cn/wz/wzinfo?wid=${actionData.wid}`" target="_blank"><i
              class="el-icon-link"
            ></i> {{ actionData.title }}</a>
          </div>
          <el-descriptions class="margin-top" :column="2" border style="margin-top:20px;">
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                发帖人
              </template>
              {{ actionData.u_name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-time"></i>
                时间
              </template>
              {{ actionData.create_time }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-files"></i>
                分类
              </template>
              {{ actionData.type }}
            </el-descriptions-item>
            <el-descriptions-item v-if="actionData.phone">
              <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                手机
              </template>
              {{ actionData.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-star-on"></i>
                评分
              </template>

              <el-rate v-model="actionData.evaluate_all" disabled text-color="#ff9900"
                       v-if="actionData.evaluate_all>0"></el-rate>
              <span v-else>尚未评分</span>

            </el-descriptions-item>
          </el-descriptions>


          <div class="contentBox">
            <div class="h">
              留言和回复
              <div class="re-reply" v-if="type==2">
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-edit"
                  @click="doRereply"
                >
                  再次回复
                </el-button>
              </div>
            </div>
            <div v-html="actionData.content" class="wzdataContent" ref="ContentBox">
            </div>
            <div v-if="actionData.image &&actionData.image.length" style="margin-top:10px;">
              <template slot="title">
                <div style="font-weight: bold;">留言图片</div>
              </template>
              <div class="image__preview">
                <el-image
                  style="width: 100px; height: 100px;object-fit: cover;margin-right:10px;"
                  :src="item"
                  v-for="(item,idx) in actionData.image"
                  :preview-src-list="actionData.image"
                >
                </el-image>
              </div>
            </div>
            <div v-if="actionData.reply && actionData.reply.length>0" class="reply">
              <div class="reply-item"
                   v-for="(item,idx) in actionData.reply"
              >
                <div class="headerLine">
                  <div class="reply-user">
                      <span class="user">
                        <span v-if="item.delete_time>0" class="delete">已删除</span>
                           {{ item.user_name || item.user_verify }}
                      </span>
                    <span class="t">{{ item.create_time }}</span>
                  </div>
                </div>
                <div v-html="item.l_reply" style="padding-top:5px;color:#666;line-height: 25px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<style lang="less">
.re-replyBox {
  .el-upload--picture-card {
    width: 90px;
    height: 90px;
    line-height: 90px;
  }
}
</style>
<style scoped lang="less">
.re-replyBox {
  padding: 20px;
}

.reply-item {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;

  &.delete_item {
    color: #999;
    border-color: #ddd;
    background-color: #eee;

    .headerLine {
      border-bottom: 1px solid #ddd !important;
    }
  }

  .headerLine {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c6e2ff;

    .actionButton {
      cursor: pointer;
    }
  }

  .reply-user {
    font-weight: bold;
    padding-bottom: 5px;
    display: flex;


    .user .delete {
      background: red;
      color: #fff;
      padding: 2px 5px;
      margin-right: 5px;
      border-radius: 5px;
    }

    .t {
      font-weight: normal;
      color: #999;
      margin-left: 30px;
    }
  }
}

.titleH {
  .title {
    color: #20a0ff;
    font-size: 22px;
    font-weight: bold;

    &:hover {
      color: #369;
    }
  }
}

.contentBox {
  margin: 20px 0;
  background: #fff;

  .h {
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    color: #20a0ff;
    padding-left: 10px;
    position: relative;

    .re-reply {
      position: absolute;
      right: 0;
      top: -6px;
    }

    &:after {
      content: "";
      position: absolute;
      top: -2px;
      width: 3px;
      background: #20a0ff;
      height: 20px;
      left: 0;
    }
  }

  .wzdataContent {
    margin-top: 10px;
    font-size: 16px !important;
    line-height: 25px;
  }

  .reply-item {
    font-size: 14px !important;
  }
}

</style>
<script>

import {getWzInfo} from "@/api/wz";

export default {
  name: 'Action',
  props: {
    type: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: '查看留言'
    }
  },
  data() {
    return {
      rereply: false,
      form: {
        reply: '',
      },
      formLoading:false,
      action: false,
      activeNames: ["1", "2"],
      actionloading: true,
      actionData: [],
    }
  },
  methods: {
    doPostReply(){
      //二次回复
      this.formLoading = true
    },
    doPostReplyCancel(){
      this.rereply = false
    },
    doRereply() {
      this.rereply = true
    },
    openAction(wid) {
      this.form = {
        reply: ''
      }
      this.actionloading = true
      this.actionData = []
      getWzInfo({wid: wid}).then(r => {
        this.actionloading = false
        this.actionData = r.data
      })
      this.action = true
    }
  }
}
</script>
